<template>
  <div class="page">
    <div class="head">
      <h1>我的钱包</h1>
    </div>

    <div class="panel" v-for="(item,index) in walletList" :key="index" @click="clickWallet(item)">
      <h2>{{item.name}}钱包</h2>
      <div class="address" v-if="item.address" v-clipboard="item.address" @success="isCopy(1)" @error="isCopy(0)" :key="1">{{item.address}}</div>
      <div class="address" v-else>未绑定地址</div>
    </div>

    <actionsheet v-model="showAction" :menus="menus" show-cancel @on-click-menu="clickOption"></actionsheet>
    
    <!-- <p>{{ $t('此操作将重置你的钱包地址，需要重新绑定新的钱包地址。请谨慎操作！') }}</p>
    <div class="address">
      <p>当前绑定钱包地址</p>
      <span>{{ address }}</span>
    </div>
    <group>
      <x-input :title="$t('输入验证码')" type="number" v-model="code" class="weui-vcode">
        <x-button @click.native="sendCode" slot="right" :disabled="disabled" type="primary" mini>{{ btnText }}</x-button>
      </x-input>
    </group>
    <box gap="20px">
      <x-button type="primary" @click.native="resetConfirm()">{{ $t('确认重置') }}</x-button>
      <x-button type="warn" link="BACK">{{ $t('返回') }}</x-button>
    </box> -->
  </div>
</template>

<script>
  import {
    Group,
    XInput,
    XButton,
    Box,
    Actionsheet
  } from 'vux'
  export default {
    components: {
      Group,
      XInput,
      XButton,
      Box,
      Actionsheet
    },
    data() {
      return {
        showAction: false,
        menus: [{
          label: '充值/提现',
          type: 'primary'
        }, {
          label: '重置钱包地址',
          type: 'warn'
        }],
        walletList: [],
        type: null,
        name: ''
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.initData()
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/users/myWalletList`)
          .then(res => {
            if (res.code == 200) {
              this.walletList = res.result
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      clickWallet(item) {
        this.type = item.type
        this.name = item.name
        this.showAction = true
      },
      clickOption(menuKey, menuItem) {
        switch (menuItem.label) {
          case '充值/提现':
            this.$router.push(`/coin?t=${this.type}&n=${this.name}`)
            break;
          case '重置钱包地址':
            this.$router.push(`/bind?t=${this.type}&n=${this.name}`)
            break;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .address {
    word-break: break-all;
    background: #f5f4f5;
    margin: 10px auto 0;
    border-radius: 5px;
    padding: 5px;
    line-height: 1.2;
    text-align: center;
  }
</style>
